<template>
    <div
            id="pricePopover"
            class="product-popover-view"
    >

        <el-popover
                ref="popover1"
                v-model:visible="visible"
                :placement="position"
                :width="1000"
                trigger="click"
        >
            <template #reference>
                <slot />
            </template>
            <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
                <div>
          <span
                  v-if="column"
                  style="color: #f57861;"
          >
            您选择的交易价：{{ column.tradePrice }} （编号为：{{ column.agentProductNumber }}）
          </span>
                </div>

                <div class="btn-view">
                    <el-button
                            class="border-btn"
                            size="mini"
                            @click="onCancel"
                    >取消</el-button>
                    <el-button
                            class="main-btn"
                            size="mini"
                            type="primary"
                            @click="onConfirm"
                    >确定</el-button>
                </div>

            </div>

            <el-table
                    ref="singleTable"
                    max-height="300px"
                    header-cell-class-name="popover-table-header"
                    border
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                    @current-change="handleCurrentChange"
                    @row-dblclick="handledbclick"
            >
                <el-table-column
                        label="编号"
                        prop="agentProductNumber"
                        header-align="center"
                        min-width="100"
                />
                <el-table-column
                        label="可营销终端"
                        align="center"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        min-width="100"
                >
                    <template #default="scope">
                        {{ getLabel('app_mode',scope.row.terminalType) }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="代理地区"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        min-width="100"
                >
                    <template #default="scope">
                        <area-list-view :areas="scope.row.region" />
                    </template>
                </el-table-column>
                <el-table-column
                        label="营销模式"
                        header-align="center"
                        align="center"
                        :show-overflow-tooltip="true"
                        min-width="100"
                >
                    <template #default="{row}">
            <span v-if="row.agentType !== 'direct'">
              {{ row.agentAttribute === '1' ?'区域招商':'精细招商' }}
            </span>
                        <span v-else> 终端直销</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="交易价(元)"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        prop="tradePrice"
                        min-width="100"
                />
                <el-table-column
                        :label="sellMode === 'agent'? '代理期限至' : '兼职期限至' "
                        header-align="center"
                        align="center"
                        min-width="120"
                        :show-overflow-tooltip="true"
                >
                    <template #default="{row}">
                        {{ dateFormat("yyyy-mm-dd",row.agentEndTime) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-popover>

    </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, onMounted, ref, onDeactivated} from 'vue'

export default defineComponent({
        name: "tradingPopover",
        props: {
            position: {
                type: String,
                default: 'top-start',
            },
            propsAgent: {
                type: Object,
                default: function() {
                    return {
                        productId: 0,
                        agentId: 0,
                    }
                },
            },
            sellMode: {
                type: String,
                default: 'agent',
            },
        },
        setup(props, { emit }) {
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            var visible = ref(false)
            var tableData = ref([])
            var column = ref(null)
            const singleTable = ref(null)

            const getData = () => {
                if (props.propsAgent) {

                    let pData = {
                        page:1,
                        pageSize:100,
                        agentProductStatus:'2',
                        ...props.propsAgent
                    }
                    api.signedAgent.AGENT_PRODUCT_LIST(pData).then((res) => {
                        if (!res.code && res.data) {
                            // tableData.value = [...res.data.list]
                            if (res.data.list && res.data.list.length) {
                                // res.data.list.forEach(item=>{
                                //     tableData.value.push(item)
                                // })
                                tableData.value = res.data.list
                            }
                        } else {
                            currentInstance.proxy.customMessage({
                                type: 'error',
                                message: res.msg,
                            })
                        }
                    })
                }
            }

            const handleCurrentChange = (val) => {
                column.value = val
            }

            const onConfirm = () => {
                if (!column) {
                    currentInstance.proxy.customMessage({
                        type: 'error',
                        message: '请选择交易价',
                    })
                }
                const a = JSON.parse(JSON.stringify(column.value))
                emit('confirm', a)
                column.value = null
                setTimeout(() => {
                    visible.value = false
                }, 100)
            }

            const onCancel = () => {
                singleTable.value.setCurrentRow()
                column.value = null
                visible.value = false
            }

            const onClose = () => {
                singleTable.value.setCurrentRow()
                column.value = null
                visible.value = false
            }

            const handledbclick = (row, column, event) => {
                const a = JSON.parse(JSON.stringify(row))
                emit('confirm', a)
                column.value = null
                visible.value = false
            }

            const openPopover = () => {
                tableData.value = []

                if (!props.propsAgent.agentId || !props.propsAgent.productId) {
                    return
                }

                getData()
                setTimeout(() => {
                    visible.value = true
                }, 300)
            }

            onMounted(() => {
                document.addEventListener('click', function(e) {
                    var pop = document.getElementById('pricePopover')
                    if (e.target !== pop && !document.contains(pop, e.target)) {
                        console.log(999)
                    } else {
                        visible.value = false
                    }
                })
            })

            onDeactivated(() => {
                document.removeEventListener('click')
            })

            return {
                visible,
                tableData,
                singleTable,
                column,

                handleCurrentChange,
                onConfirm,
                onCancel,
                onClose,
                handledbclick,
                openPopover,
            }
        },
    })
</script>

<style scoped>

</style>
